import React from 'react';
import '../css/TodoBoard.css'
import { TODOKEY, FINISHED, PENDDING, DELETE } from './config'

class TodoBoard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // todos:localStorage.getItem(TODOKEY)
            //本地储存 刷新页面不会消失
            todos: JSON.parse(localStorage.getItem(TODOKEY)) || [], //保存原数据
            filterTodos: [] //保存筛选出来的数据
        }
    }

    //创建阶段有两个生命周期函数
    //创建阶段 
    //组件节将挂载
    componentWillMount() {
        //更新组件本身的初始化状态

        //组件挂载前, 筛选数据
        var time = []
        this.state.todos.forEach(element => {
            if (element.status != DELETE) {
                time.push(element);
            }
        })
        this.setState({
            filterTodos: time
        });

    }

    render() {
        console.log(this.props);
        return (
            <div className="todo_show">
                <div className="todo_Running">
                    <h1>正在进行</h1>
                    {/* 循环内容 */}
                    {
                        this.state.filterTodos.map((element, index) => {
                            return <div key={index}
                                className="todo_item_container"
                            >
                                <div className="todo_item_checked">
                                    <input checked={element.status == FINISHED}
                                        type="checkbox" className="input2"
                                        onChange={(event) => {
                                            console.log(event.target.checked);
                                            var checked = event.target.checked;
                                            if (checked) {
                                                element.status = FINISHED;
                                            } else {
                                                element.status = PENDDING;
                                            }
                                            //更新组件的状态
                                            this.setState({
                                                todos: this.state.todos
                                            })
                                            //保存 本地储存
                                            localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                        }}
                                    />
                                </div>
                                <div className="todi_item_content">{element.content}</div>
                                <div className="todo_item_remove">
                                    <button onClick={() => {
                                        element.status = DELETE;
                                        var index = this.state.filterTodos.findIndex((subElement) => {
                                            return subElement.content == element.content;
                                        })
                                        //容错
                                        if (index !== -1) {
                                            this.state.filterTodos.splice(index, 1)
                                        }
                                        //更新组件的状态
                                        this.setState({
                                            filterTodos: this.state.filterTodos
                                        })
                                        //保存 
                                        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                    }}>删除</button>
                                </div>
                            </div>
                        })
                    }
                </div>
                <div className="todo_Completed">
                    {/* <h1>已经完成</h1> */}
                    <div>
                        <button className="btn1" onClick={() => {
                            var time = []
                            this.state.todos.forEach(element => {
                                if (element.status != DELETE) {
                                    time.push(element);
                                }
                            })
                            //更新组件的状态
                            this.setState({
                                filterTodos: time
                            })
                        }}>全部</button>
                    </div>
                    <div>
                        <button className="btn1" onClick={() => {
                            //每次数据更新完 要清空数据
                            this.state.filterTodos = [];
                            this.state.todos.forEach(element => {
                                if (element.status == FINISHED) {
                                    this.state.filterTodos.push(element)
                                }
                            });
                           //更新组件的状态
                            this.setState({
                                filterTodos: this.state.filterTodos
                            })
                        }}>已完成</button>
                    </div>
                    <div>
                        <button className="btn1" onClick={() => {
                            this.state.filterTodos = [];
                            this.state.todos.forEach(element => {
                                if (element.status == PENDDING) {
                                    this.state.filterTodos.push(element)
                                }
                            })
                          //更新组件的状态
                            this.setState({
                                filterTodos: this.state.filterTodos
                            })
                        }}>正在进行</button>
                    </div>
                    <div>
                        <button className="btn1" onClick={() => {
                            this.state.filterTodos = [];
                            this.state.todos.forEach(element => {
                                if (element.status == DELETE) {
                                    this.state.filterTodos.push(element)
                                }
                            })
                            //更新组件的状态
                            this.setState({
                                filterTodos: this.state.filterTodos
                            })
                        }}>已删除</button>
                    </div>
                </div>
            </div>
        )
    }

    //完成阶段 也就是完成挂载 : vue mounted
    componentDidMount() {
        //执行异步请求 或者耗时操作
    }

    //更新阶段
    componentWillReceiveProps(props) {
        console.log(props);
        //接收新的props ，更新组件的状态
        this.props = props;
        //去重  findIndex查找数组中是否有符合条件的因素 有就返回下标 没有就返回-1
        var index = this.state.todos.findIndex((element) => {
            return element.content == this.props.todo.content
        })

        if (index !== -1) {
            alert('不能添加重复的内容')
            return
        }
        this.state.todos.push(this.props.todo)
        //本地存储
        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))

        //组件挂载前, 筛选数据
        var time = []
        this.state.todos.forEach(element => {
            if (element.status != DELETE) {
                time.push(element);
            }
        })
        this.setState({
            filterTodos: time
        });

        this.setState({
            todos: this.state.todos
        })
        console.log(this.state);
    }

    //是否允许组件更新
    shouldComponentUpdate() {
        return true;
    }
    //即将更新
    componentWillUpdate() {

    }

    //完成更新
    componentDidUpdate() {

    }

}
export default TodoBoard